import React from 'react';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import Im from 'immutable';
import {browserHistory} from 'react-router';
import {Spin} from 'antd';
import Pagination from 'rc-pagination';
import Datetime from 'react-datetime';
import Store from './store.js';
import './index.less';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import ReAvatar from 'components/widgets/ReAvatar';
import Empty from "../../widgets/Empty/Empty";
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';
import ReIcon from 'components/widgets/ReIcon';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'UsersManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({ name: this.name });
        this.labelList = [
            {label: '全部', value: '',},
            {label: '艺术家', value: '艺术家',},
            {label: '少儿', value: '少儿',},
            {label: '设计师', value: '设计师',},
            {label: '收藏家', value: '收藏家',},
            {label: '美术馆', value: '美术馆',},
            {label: '教育机构', value: '教育机构',},
            {label: '画廊', value: '画廊',},
            {label: '设计机构', value: '设计机构',},
        ]
    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }
    componentWillReact() {
        // console.log(arguments);
    }

    popMenuItemClick(e, item) {
        e.preventDefault();
        e.stopPropagation();
        item.func && (typeof(item.func) === 'function') && item.func();
    }

    render() {
        return (
            <div className="orin-s-usersmanage-root">
                <SetHelmet title='用户管理'/>
                <div className="header-wrapper">用户管理</div>
                <div className="fix-wrapper">
                    <div className="center-manage-wrapper">
                        <div className="search-wrapper">
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.startTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '开始时间'}}
                                              onChange={(e) => this.store.startTimeChange(e)}/>
                                    {
                                        !!this.store.startTime &&
                                        <span className="close-right" onClick={() => this.store.clearStartTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.endTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '结束时间'}}
                                              onChange={(e) => this.store.endTimeChange(e)}/>
                                    {
                                        !!this.store.endTime &&
                                        <span className="close-right" onClick={() => this.store.clearEndTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="btn" onClick={()=>this.store.searchTime()}>搜索</div>
                            <div className="line-wrapper">
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.nameChange(v)}
                                    errorText={'' ? 'error' : ''}
                                    searchIcon={true}
                                    searchHandler={() => this.store.search()}
                                    closeIcon={true}
                                    closeHandler={() => this.store.closeHandle()}
                                    value={this.store.keyword}
                                    placeholder={'输入用户名称或手机号'}
                                    onKeyDown={(e) => this.store.nameInput(e)}/>
                            </div>
                            <div className="line-wrapper">
                            <ReSelectField
                                type=""
                                className="identity-input"
                                isOpen={false}
                                list={this.labelList}
                                value={this.store.label}
                                placeholder={'请选择用户身份'}
                                onChange={(v) => this.store.identityChange(v.value)}/>
                            </div>
                        </div>
                        <div className="manage-wrapper">
                            <span className="manage-btn left"
                                  onClick={()=>{this.store.addNewUsers()}}>添加用户</span>
                            <span className="manage-btn" onClick={() => this.store.downloadExcel()}>导出Excel表格</span>
                        </div>
                    </div>
                </div>
                <div className="orin-s-usersplate-root">
                    <div className="content-new-wrapper">
                        <div className="content-header-title">
                            <div className="content-number title">
                            </div>
                            <div className="content-cover title">
                                <span>头像</span>
                            </div>
                            <div className="content-name title">
                                <span>姓名</span>
                            </div>
                            <div className="content-phone title">
                                <span>手机号码</span>
                            </div>
                            <div className="content-identity title">
                                <span>身份</span>
                            </div>
                            <div className="content-register-time title">
                                <span>注册时间</span>
                            </div>
                            <div className="content-more-btn title">
                                <span>更多</span>
                            </div>
                        </div>
                        <div className="content">
                            {
                                this.store.userList.map((item, index) => {
                                    let popMenuOption = [{
                                        'name': '编辑',
                                        'func': (e) => this.store.editClick(item),
                                    }, {
                                        'name': '排序',
                                        'func': (e) => this.store.sortClick(item),
                                    }, {
                                        'name': '清除排序',
                                        'func': (e) => this.store.deleteSort(item),
                                    }
                                    ];
                                    return (
                                        <div key={index} className="users-wrapper-pc">
                                            <div className="user-item-wrapper">
                                                <div className="content-number">
                                            <span className="text">
                                                {(this.store.currentPage*2-2)*10 + (index+1)}
                                            </span>
                                                </div>
                                                <div className="content-cover">
                                                    <div className="cover">
                                                        <ReAvatar
                                                            src={$$.utils.pictureThumb(item.headPortrait,false)}
                                                            size={450} className="avatar"/>
                                                    </div>
                                                </div>
                                                <div className="content-name">
                                                    <p className="text">
                                                <span>
                                                    {item.nickName}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-phone">
                                                    <p className="text">
                                            <span>
                                                {item.phone}
                                            </span>
                                                    </p>
                                                </div>
                                                <div className="content-identity">
                                                    <p className="text">
                                                <span>
                                                    {item.label || '收藏家'}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-register-time">
                                                    <p className="text">
                                                <span>
                                                    {$$.utils.getFormatAllTime2(item.createTime,true)}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-more-btn">
                                                    {
                                                        popMenuOption.map((bItem, bIndex) => {
                                                            return (
                                                                <div key={bIndex} className="select-button"
                                                                     onClick={(e) => this.popMenuItemClick(e, bItem)}>
                                                                    <span className="btn-name">{bItem.name}</span>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={!this.store.firstRequest} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }
                {
                    this.store.userList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂无用户记录'}/>
                }
                {
                    this.store.userList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共{this.store.userTotal}条数据，当前有{this.store.userList.length}条
                        </div>
                        <Pagination
                            onChange={(current) => this.store.paginationChange(current)}
                            defaultPageSize={$$.SEM.USER_LIST_SIZE}
                            current={this.store.currentPage}
                            defaultCurrent={this.store.currentPage}
                            total={this.store.userTotal}/>
                    </div>
                }
            </div>
        );
    }
}